<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>应用测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-link {
            display: inline-block;
            background: #007bff;
            color: white;
            padding: 10px 20px;
            text-decoration: none;
            border-radius: 5px;
            margin: 10px 5px;
        }
        .test-link:hover {
            background: #0056b3;
        }
        .success { color: #28a745; }
        .error { color: #dc3545; }
    </style>
</head>
<body>
    <h1>文件管理系统 - 功能测试</h1>
    
    <div class="test-section">
        <h2>页面访问测试</h2>
        <p>点击以下链接测试各个页面：</p>
        <a href="/public" class="test-link" target="_blank">🌐 公开文件页面</a>
        <a href="/login" class="test-link" target="_blank">🔐 登录页面</a>
        <a href="/" class="test-link" target="_blank">📁 管理页面（需要登录）</a>
    </div>
    
    <div class="test-section">
        <h2>API接口测试</h2>
        <p>测试公开API接口：</p>
        <button onclick="testPublicFiles()" class="test-link">📋 获取公开文件列表</button>
        <div id="apiResult"></div>
    </div>
    
    <div class="test-section">
        <h2>功能说明</h2>
        <ul>
            <li><strong>公开页面</strong>：无需登录，可以查看文件列表和下载文件</li>
            <li><strong>管理页面</strong>：需要登录，可以上传、管理、删除文件</li>
            <li><strong>自定义文件名</strong>：上传时可以设置自定义文件名</li>
            <li><strong>拖拽上传</strong>：支持拖拽文件到上传区域</li>
        </ul>
    </div>
    
    <div class="test-section">
        <h2>默认账号</h2>
        <p><strong>用户名：</strong>admin</p>
        <p><strong>密码：</strong>password</p>
    </div>

    <script>
        async function testPublicFiles() {
            const resultDiv = document.getElementById('apiResult');
            resultDiv.innerHTML = '<p>测试中...</p>';
            
            try {
                const response = await fetch('/public/files');
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `
                        <p class="success">✅ API测试成功！</p>
                        <p>找到 ${data.files.length} 个文件</p>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                } else {
                    resultDiv.innerHTML = `<p class="error">❌ API测试失败：${response.status}</p>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<p class="error">❌ 网络错误：${error.message}</p>`;
            }
        }
    </script>
</body>
</html> 